<!DOCTYPE HTML>
<html lang="en">


<head>
    <meta charset="utf-8">
    <meta name="keywords" content="Tag: CSS, Casey Lu&#39;s Blog">
    <meta name="description" content="">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta name="renderer" content="webkit|ie-stand|ie-comp">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <title>Tag: CSS | Casey Lu&#39;s Blog</title>
    <link rel="icon" type="image/png" href="/medias/maozhao.png">

    <link rel="stylesheet" type="text/css" href="/libs/awesome/css/all.css">
    <link rel="stylesheet" type="text/css" href="/libs/materialize/materialize.min.css">
    <link rel="stylesheet" type="text/css" href="/libs/aos/aos.css">
    <link rel="stylesheet" type="text/css" href="/libs/animate/animate.min.css">
    <link rel="stylesheet" type="text/css" href="/libs/lightGallery/css/lightgallery.min.css">
    <link rel="stylesheet" type="text/css" href="/css/matery.css">
    <link rel="stylesheet" type="text/css" href="/css/my.css">

    <script src="/libs/jquery/jquery.min.js"></script>
    
<meta name="generator" content="Hexo 4.2.0"><link rel="alternate" href="/atom.xml" title="Casey Lu's Blog" type="application/atom+xml">
<link rel="stylesheet" href="/css/prism-tomorrow.css" type="text/css"></head>


<body>
    <header class="navbar-fixed">
    <nav id="headNav" class="bg-color nav-transparent">
        <div id="navContainer" class="nav-wrapper container">
            <div class="brand-logo">
                <a href="/" class="waves-effect waves-light">
                    
                    <img src="/medias/logo.png" class="logo-img" alt="LOGO">
                    
                    <span class="logo-span">Casey Lu's Blog</span>
                </a>
            </div>
            

<a href="#" data-target="mobile-nav" class="sidenav-trigger button-collapse"><i class="fas fa-bars"></i></a>
<ul class="right nav-menu">
  
  <li class="hide-on-med-and-down nav-item">
    
    <a href="/" class="waves-effect waves-light">
      
      <i class="fas fa-home" style="zoom: 0.6;"></i>
      
      <span>Index</span>
    </a>
    
  </li>
  
  <li class="hide-on-med-and-down nav-item">
    
    <a href="/tags" class="waves-effect waves-light">
      
      <i class="fas fa-tags" style="zoom: 0.6;"></i>
      
      <span>Tags</span>
    </a>
    
  </li>
  
  <li class="hide-on-med-and-down nav-item">
    
    <a href="/categories" class="waves-effect waves-light">
      
      <i class="fas fa-bookmark" style="zoom: 0.6;"></i>
      
      <span>Categories</span>
    </a>
    
  </li>
  
  <li class="hide-on-med-and-down nav-item">
    
    <a href="/archives" class="waves-effect waves-light">
      
      <i class="fas fa-archive" style="zoom: 0.6;"></i>
      
      <span>Archives</span>
    </a>
    
  </li>
  
  <li class="hide-on-med-and-down nav-item">
    
    <a href="/about" class="waves-effect waves-light">
      
      <i class="fas fa-user-circle" style="zoom: 0.6;"></i>
      
      <span>About</span>
    </a>
    
  </li>
  
  <li>
    <a href="#searchModal" class="modal-trigger waves-effect waves-light">
      <i id="searchIcon" class="fas fa-search" title="Search" style="zoom: 0.85;"></i>
    </a>
  </li>
</ul>

<div id="mobile-nav" class="side-nav sidenav">

    <div class="mobile-head bg-color">
        
        <img src="/medias/logo.png" class="logo-img circle responsive-img">
        
        <div class="logo-name">Casey Lu's Blog</div>
        <div class="logo-desc">
            
            Never really desperate, only the lost of the soul.
            
        </div>
    </div>

    

    <ul class="menu-list mobile-menu-list">
        
        <li class="m-nav-item">
	  
		<a href="/" class="waves-effect waves-light">
			
			    <i class="fa-fw fas fa-home"></i>
			
			Index
		</a>
          
        </li>
        
        <li class="m-nav-item">
	  
		<a href="/tags" class="waves-effect waves-light">
			
			    <i class="fa-fw fas fa-tags"></i>
			
			Tags
		</a>
          
        </li>
        
        <li class="m-nav-item">
	  
		<a href="/categories" class="waves-effect waves-light">
			
			    <i class="fa-fw fas fa-bookmark"></i>
			
			Categories
		</a>
          
        </li>
        
        <li class="m-nav-item">
	  
		<a href="/archives" class="waves-effect waves-light">
			
			    <i class="fa-fw fas fa-archive"></i>
			
			Archives
		</a>
          
        </li>
        
        <li class="m-nav-item">
	  
		<a href="/about" class="waves-effect waves-light">
			
			    <i class="fa-fw fas fa-user-circle"></i>
			
			About
		</a>
          
        </li>
        
        
    </ul>
</div>

        </div>

        
    </nav>

</header>

    <div class="bg-cover pd-header about-cover">
    <div class="container">
    <div class="row">
    <div class="col s10 offset-s1 m8 offset-m2 l8 offset-l2">
        <div class="brand">
            <div class="title center-align">
                
                Look for a Star
                
            </div>

            <div class="description center-align">
                
                <span id="subtitle"></span>
                <script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.11"></script>
                <script>
                    var typed = new Typed("#subtitle", {
                        strings: ['时光无寻处，惟有少年心','Time is lost while living, only a youth heart filled sincerity'],
                        startDelay: 300,
                        typeSpeed: 100,
                        loop: true,
                        backSpeed: 50,
                        showCursor: true
                    });
                </script>
                
            </div>
        </div>
    </div>
</div>


<script>
    // 每天切换 banner 图.  Switch banner image every day.
    $('.bg-cover').css('background-image', 'url(/medias/banner/' + new Date().getDay() + '.jpg)');
</script>


    </div>
</div>

<main class="content">

    

<div id="tags" class="container chip-container">
    <div class="card">
        <div class="card-content">
            <div class="tag-title center-align">
                <i class="fas fa-tags"></i>&nbsp;&nbsp;Post Tags
            </div>
            <div class="tag-chips">
                
                
                <a href="/tags/Javascript/" title="Javascript: 19">
                    <span class="chip center-align waves-effect waves-light
                             chip-default "
                            data-tagname="Javascript" style="background-color: #F9EBEA;">Javascript
                        <span class="tag-length">19</span>
                    </span>
                </a>
                
                
                <a href="/tags/%E9%97%AD%E5%8C%85/" title="闭包: 1">
                    <span class="chip center-align waves-effect waves-light
                             chip-default "
                            data-tagname="闭包" style="background-color: #F5EEF8;">闭包
                        <span class="tag-length">1</span>
                    </span>
                </a>
                
                
                <a href="/tags/Life/" title="Life: 3">
                    <span class="chip center-align waves-effect waves-light
                             chip-default "
                            data-tagname="Life" style="background-color: #D5F5E3;">Life
                        <span class="tag-length">3</span>
                    </span>
                </a>
                
                
                <a href="/tags/Node/" title="Node: 1">
                    <span class="chip center-align waves-effect waves-light
                             chip-default "
                            data-tagname="Node" style="background-color: #E8F8F5;">Node
                        <span class="tag-length">1</span>
                    </span>
                </a>
                
                
                <a href="/tags/CSS/" title="CSS: 9">
                    <span class="chip center-align waves-effect waves-light
                             chip-active "
                            data-tagname="CSS" style="background-color: #FEF9E7;">CSS
                        <span class="tag-length">9</span>
                    </span>
                </a>
                
                
                <a href="/tags/HTML/" title="HTML: 4">
                    <span class="chip center-align waves-effect waves-light
                             chip-default "
                            data-tagname="HTML" style="background-color: #F8F9F9;">HTML
                        <span class="tag-length">4</span>
                    </span>
                </a>
                
                
                <a href="/tags/ES6/" title="ES6: 3">
                    <span class="chip center-align waves-effect waves-light
                             chip-default "
                            data-tagname="ES6" style="background-color: #82E0AA;">ES6
                        <span class="tag-length">3</span>
                    </span>
                </a>
                
                
                <a href="/tags/Promise/" title="Promise: 1">
                    <span class="chip center-align waves-effect waves-light
                             chip-default "
                            data-tagname="Promise" style="background-color: #D7BDE2;">Promise
                        <span class="tag-length">1</span>
                    </span>
                </a>
                
                
                <a href="/tags/Vue/" title="Vue: 6">
                    <span class="chip center-align waves-effect waves-light
                             chip-default "
                            data-tagname="Vue" style="background-color: #A3E4D7;">Vue
                        <span class="tag-length">6</span>
                    </span>
                </a>
                
                
                <a href="/tags/HTTP/" title="HTTP: 3">
                    <span class="chip center-align waves-effect waves-light
                             chip-default "
                            data-tagname="HTTP" style="background-color: #85C1E9;">HTTP
                        <span class="tag-length">3</span>
                    </span>
                </a>
                
                
                <a href="/tags/Scroll/" title="Scroll: 1">
                    <span class="chip center-align waves-effect waves-light
                             chip-default "
                            data-tagname="Scroll" style="background-color: #F8C471;">Scroll
                        <span class="tag-length">1</span>
                    </span>
                </a>
                
                
                <a href="/tags/Flex/" title="Flex: 1">
                    <span class="chip center-align waves-effect waves-light
                             chip-default "
                            data-tagname="Flex" style="background-color: #F9E79F;">Flex
                        <span class="tag-length">1</span>
                    </span>
                </a>
                
                
                <a href="/tags/Position/" title="Position: 1">
                    <span class="chip center-align waves-effect waves-light
                             chip-default "
                            data-tagname="Position" style="background-color: #F8F9F9;">Position
                        <span class="tag-length">1</span>
                    </span>
                </a>
                
                
                <a href="/tags/WebSocket/" title="WebSocket: 1">
                    <span class="chip center-align waves-effect waves-light
                             chip-default "
                            data-tagname="WebSocket" style="background-color: #82E0AA;">WebSocket
                        <span class="tag-length">1</span>
                    </span>
                </a>
                
                
                <a href="/tags/Ajax/" title="Ajax: 2">
                    <span class="chip center-align waves-effect waves-light
                             chip-default "
                            data-tagname="Ajax" style="background-color: #F8F9F9;">Ajax
                        <span class="tag-length">2</span>
                    </span>
                </a>
                
                
                <a href="/tags/Jsonp/" title="Jsonp: 1">
                    <span class="chip center-align waves-effect waves-light
                             chip-default "
                            data-tagname="Jsonp" style="background-color: #F9E79F;">Jsonp
                        <span class="tag-length">1</span>
                    </span>
                </a>
                
                
                <a href="/tags/DOM/" title="DOM: 1">
                    <span class="chip center-align waves-effect waves-light
                             chip-default "
                            data-tagname="DOM" style="background-color: #F5EEF8;">DOM
                        <span class="tag-length">1</span>
                    </span>
                </a>
                
                
                <a href="/tags/Leetcode/" title="Leetcode: 4">
                    <span class="chip center-align waves-effect waves-light
                             chip-default "
                            data-tagname="Leetcode" style="background-color: #85C1E9;">Leetcode
                        <span class="tag-length">4</span>
                    </span>
                </a>
                
                
                <a href="/tags/%E7%AE%97%E6%B3%95/" title="算法: 5">
                    <span class="chip center-align waves-effect waves-light
                             chip-default "
                            data-tagname="算法" style="background-color: #F9EBEA;">算法
                        <span class="tag-length">5</span>
                    </span>
                </a>
                
                
                <a href="/tags/LazyLoad/" title="LazyLoad: 1">
                    <span class="chip center-align waves-effect waves-light
                             chip-default "
                            data-tagname="LazyLoad" style="background-color: #FFF;">LazyLoad
                        <span class="tag-length">1</span>
                    </span>
                </a>
                
                
                <a href="/tags/Axios/" title="Axios: 1">
                    <span class="chip center-align waves-effect waves-light
                             chip-default "
                            data-tagname="Axios" style="background-color: #FEF9E7;">Axios
                        <span class="tag-length">1</span>
                    </span>
                </a>
                
                
                <a href="/tags/React/" title="React: 4">
                    <span class="chip center-align waves-effect waves-light
                             chip-default "
                            data-tagname="React" style="background-color: #F9EBEA;">React
                        <span class="tag-length">4</span>
                    </span>
                </a>
                
                
                <a href="/tags/%E7%88%AC%E8%99%AB/" title="爬虫: 1">
                    <span class="chip center-align waves-effect waves-light
                             chip-default "
                            data-tagname="爬虫" style="background-color: #D7BDE2;">爬虫
                        <span class="tag-length">1</span>
                    </span>
                </a>
                
                
                <a href="/tags/Git/" title="Git: 1">
                    <span class="chip center-align waves-effect waves-light
                             chip-default "
                            data-tagname="Git" style="background-color: #F9E79F;">Git
                        <span class="tag-length">1</span>
                    </span>
                </a>
                
                
                <a href="/tags/%E5%BC%82%E6%AD%A5/" title="异步: 1">
                    <span class="chip center-align waves-effect waves-light
                             chip-default "
                            data-tagname="异步" style="background-color: #82E0AA;">异步
                        <span class="tag-length">1</span>
                    </span>
                </a>
                
                
                <a href="/tags/yarn/" title="yarn: 1">
                    <span class="chip center-align waves-effect waves-light
                             chip-default "
                            data-tagname="yarn" style="background-color: #FEF9E7;">yarn
                        <span class="tag-length">1</span>
                    </span>
                </a>
                
                
                <a href="/tags/Lottie/" title="Lottie: 1">
                    <span class="chip center-align waves-effect waves-light
                             chip-default "
                            data-tagname="Lottie" style="background-color: #FEF9E7;">Lottie
                        <span class="tag-length">1</span>
                    </span>
                </a>
                
                
                <a href="/tags/Animation/" title="Animation: 2">
                    <span class="chip center-align waves-effect waves-light
                             chip-default "
                            data-tagname="Animation" style="background-color: #D5F5E3;">Animation
                        <span class="tag-length">2</span>
                    </span>
                </a>
                
                
                <a href="/tags/cookie/" title="cookie: 1">
                    <span class="chip center-align waves-effect waves-light
                             chip-default "
                            data-tagname="cookie" style="background-color: #F9E79F;">cookie
                        <span class="tag-length">1</span>
                    </span>
                </a>
                
                
                <a href="/tags/Native/" title="Native: 2">
                    <span class="chip center-align waves-effect waves-light
                             chip-default "
                            data-tagname="Native" style="background-color: #F8C471;">Native
                        <span class="tag-length">2</span>
                    </span>
                </a>
                
                
                <a href="/tags/Flutter/" title="Flutter: 1">
                    <span class="chip center-align waves-effect waves-light
                             chip-default "
                            data-tagname="Flutter" style="background-color: #F9E79F;">Flutter
                        <span class="tag-length">1</span>
                    </span>
                </a>
                
                
                <a href="/tags/%E5%B0%8F%E7%A8%8B%E5%BA%8F/" title="小程序: 2">
                    <span class="chip center-align waves-effect waves-light
                             chip-default "
                            data-tagname="小程序" style="background-color: #F8C471;">小程序
                        <span class="tag-length">2</span>
                    </span>
                </a>
                
                
                <a href="/tags/PWA/" title="PWA: 1">
                    <span class="chip center-align waves-effect waves-light
                             chip-default "
                            data-tagname="PWA" style="background-color: #FEF9E7;">PWA
                        <span class="tag-length">1</span>
                    </span>
                </a>
                
                
                <a href="/tags/%E5%BF%AB%E5%BA%94%E7%94%A8/" title="快应用: 1">
                    <span class="chip center-align waves-effect waves-light
                             chip-default "
                            data-tagname="快应用" style="background-color: #D7BDE2;">快应用
                        <span class="tag-length">1</span>
                    </span>
                </a>
                
                
                <a href="/tags/JsBridge/" title="JsBridge: 1">
                    <span class="chip center-align waves-effect waves-light
                             chip-default "
                            data-tagname="JsBridge" style="background-color: #F8F9F9;">JsBridge
                        <span class="tag-length">1</span>
                    </span>
                </a>
                
                
                <a href="/tags/%E6%B5%8F%E8%A7%88%E5%99%A8/" title="浏览器: 1">
                    <span class="chip center-align waves-effect waves-light
                             chip-default "
                            data-tagname="浏览器" style="background-color: #D5F5E3;">浏览器
                        <span class="tag-length">1</span>
                    </span>
                </a>
                
                
                <a href="/tags/%E6%93%8D%E4%BD%9C%E7%B3%BB%E7%BB%9F/" title="操作系统: 1">
                    <span class="chip center-align waves-effect waves-light
                             chip-default "
                            data-tagname="操作系统" style="background-color: #F8F9F9;">操作系统
                        <span class="tag-length">1</span>
                    </span>
                </a>
                
            </div>
        </div>
    </div>
</div>

    

    <article id="articles" class="container articles">
        <div class="row tags-posts">
            
            
            <div class="article tag-post col s12 m6 l4" data-tags="CSS" data-aos="fade-up">
                <div class="card">
                    <a href="/2020/04/08/25-css3-dong-hua-ji-chu/">
                        <div class="card-image tag-image">
                            
                            
                            <img src="/medias/articleimages/3.jpg" class="responsive-img" alt="CSS3动画基础">
                            
                            <span class="card-title">CSS3动画基础</span>
                        </div>
                    </a>
                    <div class="card-content article-content">
                        <div class="publish-info">
                            <span class="publish-date">
                                <i class="far fa-clock fa-fw icon-date"></i>2020-04-08
                            </span>
                            <span class="publish-author">
                                
                                <i class="fas fa-bookmark fa-fw icon-category"></i>
                                
                                <a href="/categories/%E5%89%8D%E7%AB%AF%E5%9F%BA%E7%A1%80/" class="post-category">
                                前端基础
                                </a>
                                
                                
                            </span>
                        </div>
                    </div>
                </div>
            </div>
            
            
            <div class="article tag-post col s12 m6 l4" data-tags="Javascript, CSS, HTML, Vue" data-aos="fade-up">
                <div class="card">
                    <a href="/2020/04/01/23-ma-yi-jin-fu-zi-jie-tiao-dong-qian-duan-mian-shi/">
                        <div class="card-image tag-image">
                            
                            
                            <img src="/medias/articleimages/35.jpg" class="responsive-img" alt="蚂蚁金服和字节跳动の面经">
                            
                            <span class="card-title">蚂蚁金服和字节跳动の面经</span>
                        </div>
                    </a>
                    <div class="card-content article-content">
                        <div class="publish-info">
                            <span class="publish-date">
                                <i class="far fa-clock fa-fw icon-date"></i>2020-04-01
                            </span>
                            <span class="publish-author">
                                
                                <i class="fas fa-bookmark fa-fw icon-category"></i>
                                
                                <a href="/categories/%E7%AC%94%E8%AF%95%E9%9D%A2%E8%AF%95/" class="post-category">
                                笔试面试
                                </a>
                                
                                
                            </span>
                        </div>
                    </div>
                </div>
            </div>
            
            
            <div class="article tag-post col s12 m6 l4" data-tags="Javascript, CSS, 算法" data-aos="fade-up">
                <div class="card">
                    <a href="/2020/03/30/21-qian-duan-mian-shi-shou-si-js-dai-ma-xiao-jie-wu/">
                        <div class="card-image tag-image">
                            
                            
                            <img src="/medias/articleimages/13.jpg" class="responsive-img" alt="前端面试手撕JS代码系列（五）">
                            
                            <span class="card-title">前端面试手撕JS代码系列（五）</span>
                        </div>
                    </a>
                    <div class="card-content article-content">
                        <div class="publish-info">
                            <span class="publish-date">
                                <i class="far fa-clock fa-fw icon-date"></i>2020-03-30
                            </span>
                            <span class="publish-author">
                                
                                <i class="fas fa-bookmark fa-fw icon-category"></i>
                                
                                <a href="/categories/%E7%AC%94%E8%AF%95%E9%9D%A2%E8%AF%95/" class="post-category">
                                笔试面试
                                </a>
                                
                                
                            </span>
                        </div>
                    </div>
                </div>
            </div>
            
            
            <div class="article tag-post col s12 m6 l4" data-tags="CSS" data-aos="fade-up">
                <div class="card">
                    <a href="/2020/03/28/20-css-zhong-chang-jian-de-bu-ju-fang-shi/">
                        <div class="card-image tag-image">
                            
                            
                            <img src="/medias/articleimages/32.jpg" class="responsive-img" alt="CSS中常见的布局方式">
                            
                            <span class="card-title">CSS中常见的布局方式</span>
                        </div>
                    </a>
                    <div class="card-content article-content">
                        <div class="publish-info">
                            <span class="publish-date">
                                <i class="far fa-clock fa-fw icon-date"></i>2020-03-28
                            </span>
                            <span class="publish-author">
                                
                                <i class="fas fa-bookmark fa-fw icon-category"></i>
                                
                                <a href="/categories/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/" class="post-category">
                                技术分享
                                </a>
                                
                                
                            </span>
                        </div>
                    </div>
                </div>
            </div>
            
            
            <div class="article tag-post col s12 m6 l4" data-tags="CSS, Flex, Position" data-aos="fade-up">
                <div class="card">
                    <a href="/2020/03/13/14-css-zhong-de-flex-dan-xing-bu-ju-he-ding-wei/">
                        <div class="card-image tag-image">
                            
                            
                            <img src="/medias/articleimages/24.jpg" class="responsive-img" alt="CSS中的Flex弹性布局和定位">
                            
                            <span class="card-title">CSS中的Flex弹性布局和定位</span>
                        </div>
                    </a>
                    <div class="card-content article-content">
                        <div class="publish-info">
                            <span class="publish-date">
                                <i class="far fa-clock fa-fw icon-date"></i>2020-03-13
                            </span>
                            <span class="publish-author">
                                
                                <i class="fas fa-bookmark fa-fw icon-category"></i>
                                
                                <a href="/categories/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/" class="post-category">
                                技术分享
                                </a>
                                
                                
                            </span>
                        </div>
                    </div>
                </div>
            </div>
            
            
            <div class="article tag-post col s12 m6 l4" data-tags="Javascript, CSS, ES6, Vue, HTTP" data-aos="fade-up">
                <div class="card">
                    <a href="/2020/03/08/7-cbu-ji-zhu-bu-mian-shi-zong-jie-chi-xu-geng-xin/">
                        <div class="card-image tag-image">
                            
                            
                            <img src="/medias/articleimages/3.jpg" class="responsive-img" alt="CBU技术部面试总结（持续更新）">
                            
                            <span class="card-title">CBU技术部面试总结（持续更新）</span>
                        </div>
                    </a>
                    <div class="card-content article-content">
                        <div class="publish-info">
                            <span class="publish-date">
                                <i class="far fa-clock fa-fw icon-date"></i>2020-03-08
                            </span>
                            <span class="publish-author">
                                
                                <i class="fas fa-bookmark fa-fw icon-category"></i>
                                
                                <a href="/categories/%E7%AC%94%E8%AF%95%E9%9D%A2%E8%AF%95/" class="post-category">
                                笔试面试
                                </a>
                                
                                
                            </span>
                        </div>
                    </div>
                </div>
            </div>
            
            
            <div class="article tag-post col s12 m6 l4" data-tags="Javascript, CSS, HTML" data-aos="fade-up">
                <div class="card">
                    <a href="/2020/03/07/6-niu-ke-wang-qian-duan-zhi-shi-shua-ti-xiao-jie/">
                        <div class="card-image tag-image">
                            
                            
                            <img src="/medias/articleimages/36.jpg" class="responsive-img" alt="牛客网前端知识点小结(一)">
                            
                            <span class="card-title">牛客网前端知识点小结(一)</span>
                        </div>
                    </a>
                    <div class="card-content article-content">
                        <div class="publish-info">
                            <span class="publish-date">
                                <i class="far fa-clock fa-fw icon-date"></i>2020-03-07
                            </span>
                            <span class="publish-author">
                                
                                <i class="fas fa-bookmark fa-fw icon-category"></i>
                                
                                <a href="/categories/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/" class="post-category">
                                技术分享
                                </a>
                                
                                
                            </span>
                        </div>
                    </div>
                </div>
            </div>
            
            
            <div class="article tag-post col s12 m6 l4" data-tags="Javascript, CSS, HTML, Vue" data-aos="fade-up">
                <div class="card">
                    <a href="/2020/03/04/4-a-li-ding-ding-qian-duan-shi-xi-yi-mian/">
                        <div class="card-image tag-image">
                            
                            
                            <img src="/medias/articleimages/29.jpg" class="responsive-img" alt="阿里钉钉前端实习一面">
                            
                            <span class="card-title">阿里钉钉前端实习一面</span>
                        </div>
                    </a>
                    <div class="card-content article-content">
                        <div class="publish-info">
                            <span class="publish-date">
                                <i class="far fa-clock fa-fw icon-date"></i>2020-03-04
                            </span>
                            <span class="publish-author">
                                
                                <i class="fas fa-bookmark fa-fw icon-category"></i>
                                
                                <a href="/categories/%E7%AC%94%E8%AF%95%E9%9D%A2%E8%AF%95/" class="post-category">
                                笔试面试
                                </a>
                                
                                
                            </span>
                        </div>
                    </div>
                </div>
            </div>
            
            
            <div class="article tag-post col s12 m6 l4" data-tags="Javascript, CSS, DOM" data-aos="fade-up">
                <div class="card">
                    <a href="/2020/03/03/3-qian-duan-xing-neng-de-you-hua-de-si-kao/">
                        <div class="card-image tag-image">
                            
                            
                            <img src="/medias/articleimages/24.jpg" class="responsive-img" alt="前端性能优化的思考">
                            
                            <span class="card-title">前端性能优化的思考</span>
                        </div>
                    </a>
                    <div class="card-content article-content">
                        <div class="publish-info">
                            <span class="publish-date">
                                <i class="far fa-clock fa-fw icon-date"></i>2020-03-03
                            </span>
                            <span class="publish-author">
                                
                                <i class="fas fa-bookmark fa-fw icon-category"></i>
                                
                                <a href="/categories/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/" class="post-category">
                                技术分享
                                </a>
                                
                                
                            </span>
                        </div>
                    </div>
                </div>
            </div>
            
        </div>
    </article>
</main>




    <footer class="page-footer bg-color">
    
        <link rel="stylesheet" href="/libs/aplayer/APlayer.min.css">
<div class="">
    
    <div class="row">
        <meting-js class="col l8 offset-l2 m10 offset-m1 s12"
                   server="netease"
                   type="playlist"
                   id="4892766072"
                   fixed='true'
                   autoplay='false'
                   theme:='#42b983'
                   loop='all'
                   order='random'
                   preload='auto'
                   volume='0.7'
                   list-folded='true'
        >
        </meting-js>
    </div>
</div>

<script src="/libs/aplayer/APlayer.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/meting@2/dist/Meting.min.js"></script>

    
    <div class="container row center-align" style="margin-bottom: 0px !important;">
        <div class="col s12 m8 l8 copy-right">
            Copyright&nbsp;&copy;
            <span id="year">2020</span>
            <a href="https://caseylu.gitee.io" target="_blank">Casey Lu</a>
            |&nbsp;Powered by&nbsp;<a href="https://hexo.io/" target="_blank">Hexo</a>
            |&nbsp;Theme&nbsp;<a href="https://github.com/blinkfox/hexo-theme-matery" target="_blank">Matery</a>
            <br>
            
            &nbsp;<i class="fas fa-chart-area"></i>&nbsp;站点总字数:&nbsp;<span
                class="white-color">63.2k</span>&nbsp;字
            
            
            
            
            
            
            <span id="busuanzi_container_site_pv">
                |&nbsp;<i class="far fa-eye"></i>&nbsp;总访问量:&nbsp;<span id="busuanzi_value_site_pv"
                    class="white-color"></span>&nbsp;次
            </span>
            
            
            <span id="busuanzi_container_site_uv">
                |&nbsp;<i class="fas fa-users"></i>&nbsp;总访问人数:&nbsp;<span id="busuanzi_value_site_uv"
                    class="white-color"></span>&nbsp;人
            </span>
            
            <br>
            
            <br>
            
        </div>
        <div class="col s12 m4 l4 social-link social-statis">
    <a href="https://github.com/L0ittle" class="tooltipped" target="_blank" data-tooltip="访问我的GitHub" data-position="top" data-delay="50">
        <i class="fab fa-github"></i>
    </a>



    <a href="mailto:caseylu119@163.com" class="tooltipped" target="_blank" data-tooltip="邮件联系我" data-position="top" data-delay="50">
        <i class="fas fa-envelope-open"></i>
    </a>







    <a href="tencent://AddContact/?fromId=50&fromSubId=1&subcmd=all&uin=1351238945" class="tooltipped" target="_blank" data-tooltip="QQ联系我: 1351238945" data-position="top" data-delay="50">
        <i class="fab fa-qq"></i>
    </a>







    <a href="/atom.xml" class="tooltipped" target="_blank" data-tooltip="RSS 订阅" data-position="top" data-delay="50">
        <i class="fas fa-rss"></i>
    </a>

</div>
    </div>
</footer>

<div class="progress-bar"></div>


    <!-- 搜索遮罩框 -->
<div id="searchModal" class="modal">
    <div class="modal-content">
        <div class="search-header">
            <span class="title"><i class="fas fa-search"></i>&nbsp;&nbsp;Search</span>
            <input type="search" id="searchInput" name="s" placeholder="Please enter a search keyword"
                   class="search-input">
        </div>
        <div id="searchResult"></div>
    </div>
</div>

<script src="/js/search.js"></script>
<script type="text/javascript">
$(function () {
    searchFunc("/" + "search.xml", 'searchInput', 'searchResult');
});
</script>
    <!-- 回到顶部按钮 -->
<div id="backTop" class="top-scroll">
    <a class="btn-floating btn-large waves-effect waves-light" href="#!">
        <i class="fas fa-arrow-up"></i>
    </a>
</div>


    <script src="/libs/materialize/materialize.min.js"></script>
    <script src="/libs/masonry/masonry.pkgd.min.js"></script>
    <script src="/libs/aos/aos.js"></script>
    <script src="/libs/scrollprogress/scrollProgress.min.js"></script>
    <script src="/libs/lightGallery/js/lightgallery-all.min.js"></script>
    <script src="/js/matery.js"></script>

    <!-- Global site tag (gtag.js) - Google Analytics -->


    <!-- Baidu Analytics -->

    <!-- Baidu Push -->

<script>
    (function () {
        var bp = document.createElement('script');
        var curProtocol = window.location.protocol.split(':')[0];
        if (curProtocol === 'https') {
            bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
        } else {
            bp.src = 'http://push.zhanzhang.baidu.com/push.js';
        }
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(bp, s);
    })();
</script>

    
    <script src="/libs/others/clicklove.js" async="async"></script>
    
    
    <script async src="/libs/others/busuanzi.pure.mini.js"></script>
    

    

    

    

    

    
    
    
    <script src="/libs/instantpage/instantpage.js" type="module"></script>
    

</body>

</html>
